<template>
 <div class="exhibitor">
      <top-banner></top-banner>
    <h3 class="title">参展商注册登记</h3>
    <div class="langs">
      <span :class="{check:langStatus==1}" @click="onCheck(1)">中文</span> &nbsp;/&nbsp;
      <span :class="{check:langStatus==2}" @click="onCheck(2)">English</span>
    </div>
    <el-form
      class="form-data"
      ref="formData"
      v-if="isFormShow"
      :rules="rulesUserInfo"
      :model="formData"
    >
      <el-form-item :label="lang.name" prop="Name">
        <el-input v-model="formData.name"></el-input>
      </el-form-item>
      <el-form-item :label="lang.mobile" prop="Mobile">
        <el-input v-model="formData.mobile"></el-input>
      </el-form-item>
      <el-form-item :label="lang.IDNO">
        <el-input v-model="formData.IDNO"></el-input>
      </el-form-item>
      <el-form-item :label="lang.email" prop="Email">
        <el-input v-model="formData.email"></el-input>
      </el-form-item>
      <el-form-item :label="lang.comName">
        <el-input v-model="formData.comName"></el-input>
      </el-form-item>
      <el-form-item :label="lang.position">
        <el-input v-model="formData.position"></el-input>
      </el-form-item>
      <el-form-item :label="lang.boothNo">
        <el-input v-model="formData.boothNo"></el-input>
      </el-form-item>
      <el-form-item :label="lang.verificationCode" class="identify_code">
        <el-input v-model="formData.verificationCode"></el-input>
        <div @click="updateCode">
          <s-identify @click="updateCode" v-if="isShowCode" :identifyCode="identifyCode"></s-identify>
        </div>
      </el-form-item>
      <div class="on_but">
        <el-button type="primary" @click="submitForm">{{lang.but1}}</el-button>
      </div>
    </el-form>
 </div>
</template>

<script>
import { isWscnEmail, isMobile, isIdNo, isCMobile } from "@/utils/validate";
import SIdentify from "@/components/SIdentify.vue";
import TopBanner from "@/views/pages/TopBanner.vue";
export default {
  name: "exhibitor",//参展商
  components: {
    SIdentify,
    TopBanner
  },
  data() {
    return {
      tabPosition: "c",
      isShowCode: true,
      isFormShow: true,
      identifyCode: "1234",
      identifyCodes: "1234",
      langStatus: 1,
      sidentify: "",
      formData: {
        name: "",
        comName: "",
        email: "",
        mobile: "",
        IDNO: "",
        verificationCode: ""
      },
      lang: {
        name: "姓名",
        comName: "公司名",
        email: "邮箱",
        mobile: "手机",
        IDNO: "身份证号",
        position: "职位",
        boothNo:"展位号",
        but1: "提交",
        but2: "返回",
        verificationCode:"验证码"
      },
      langs: {
        English: {
          name: "Name",
          comName: "CompanyName",
          email: "Email",
          mobile: "Mobile",
          IDNO: "IDNumber",
          position:"Position",
          boothNo:"Booth No",
          but1: "Submit",
          but2: "Return",
          verificationCode:"VerificationCode"
        },
        Chinese: {
          name: "姓名",
          comName: "公司名",
          email: "邮箱",
          mobile: "手机号",
          IDNO: "身份证号",
          position: "职位",
          boothNo:"展位号",
          but1: "提交",
          but2: "返回",
          verificationCode:"验证码"
        }
      },
      rulesUserInfo: {
        Name: [{ required: true, message: "请输入姓名", trigger: "blur" }],
        Mobile: [
          { required: true, message: "请输入手机号", trigger: "blur" },
          { required: true, trigger: "blur", validator: isMobile }
        ],
        Email: [
          { required: true, message: "请输入邮箱", trigger: "blur" },
          { required: true, trigger: "blur", validator: isWscnEmail }
        ]
      },
      fileUrl: "",
      showPdf: false,
      contractVisable: false
    };
  },
  watch: {
    langStatus: function(val) {
      this.isFormShow = false;
      console.info(val);
      if (val == 1) {
        this.lang = this.langs.Chinese;
      }
      if (val == 2) {
        this.lang = this.langs.English;
      }
      this.isFormShow = true;
    }
  },
  mounted() {
    this.identifyCode = "";
    this.makeCode(this.identifyCodes, 1);
    console.info(this.lang);
  },

  methods: {
    onCheck(status) {
      this.langStatus = status;
    },
    onReturn() {
      this.$router.go(-1);
    },
    /**
     * 提交
     */
    submitForm() {
      this.$refs.formData.validate(valid => {
        if (valid) {
          if (this.identifyCode == this.formData.verificationCode) {
            console.info(this.formData);
          } else {
            this.$message({
              showClose: true,
              message: "验证码错误",
              type: "error"
            });
            this.updateCode();
          }
        }
      });
    },
    updateCode() {
      console.info(112);
      this.isShowCode = false;
      this.identifyCode = "";
      this.makeCode(this.identifyCodes, 1);
      this.isShowCode = true;
    },
    //验证码
    randomNum(min, max) {
      return Math.floor(Math.random() * (max - min) + min);
    },

    refreshCode() {
      this.identifyCode = "";
      this.makeCode(this.identifyCodes, 1);
    },
    makeCode(o, l) {
      for (let i = 0; i < 4; i++) {
        this.identifyCode += this.identifyCodes[
          this.randomNum(0, this.identifyCodes.length)
        ];
      }
      console.log(this.identifyCode);
    }
  }
};
</script>

<style lang="scss" scoped>
.exhibitor {
    padding-top: 20px;
  position: relative;
  width: 100%;
  .title {
    margin-top: 1rem;
    color:#4C4C4C;
  }
  .langs {
    display: flex;
    margin-bottom: 30px;
    font-weight: bold;
    color: #000;
    position: absolute;
    right: 20px;
    span {
      display: block;
      // text-decoration:underline;
      line-height: 20px;
    }
    .check {
      color: #318bf5;
      border-bottom: solid #318bf5;
    }
  }
  .title {
    width: 100%;
    font-size: 23px;
    margin-bottom: 20px;
  }
  .form-data {
    margin-top: 10px;
  }

  .on_but {
    margin-top: 10px;
    .el-button--primary{
      width: 100%;
    }
    margin-bottom: 5rem;
  }
  /deep/ .el-form {
    width: 90%;
    margin-left: 5%;
    margin-top: 50px;

    .el-form-item {
      margin-bottom: 0;
      .el-form-item__label {
        width: 100%;
        text-align: left;
        font-weight: bolder;
      }
      .el-form-item__label {
        height: 30px;
        margin-top: 8px;
      }
      .el-input__inner {
        height: 30px;
      }
      .el-form-item__content {
        margin-left: 0;
      }
      &.identify_code {
        // display: flex;
        // align-items: center;
        // margin-top: 10px;
        .el-form-item__content {
          width: 100%;
          display: flex;
          margin-top: 15px;
        }
        .el-input {
          width: 100%;
          text-align: left;
        }
        .el-input__inner {
          
    width: 100%;
        }
        .el-button {
          width: 50px;
          padding: 0;
          margin-left: 18px;
        }
      }
    }

    .s-canvas {
      width: 120px;
    }
  }
}
</style>
